<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>员工主界面</title>
    <!--<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">-->
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>

<style>
    .button-3d-1 {
        border-radius: 80px;
        position: relative;
        border: #009f95 8px solid;
        color: #009f95;
        padding: 15px 24px;
        font-size: 2.4rem;
        outline: none;
        box-shadow: -6px 6px 0 #333333;
    }

    .button-3d-1:active {
        border-radius: 80px;
        border: hsl(16, 100%, 40%) 8px solid;
        top: 3px;
        left: -3px;
        box-shadow: -3px 3px 0 hsl(16, 100%, 30%);
    }

</style>

<body>

<div class="layui-layout layui-layout-admin">
    <!--头部导航栏-->
    <div class="layui-header layui-bg-green">
        <a href="" th:href="@{/emp/empIndex}">
            <div class="layui-logo layui-hide-xs layui-bg-green">
                <i class="layui-icon layui-icon-home" style="font-size: 35px"></i> 主页
            </div>
        </a>

        <!-- 头部区域（可配合layui 已有的水平导航） 导航栏 -->
        <ul class="layui-nav layui-layout-left layui-bg-green">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs"><a href="" th:href="@{/emp/empIndex}" title="打卡界面">打卡界面</a></li>
            <li class="layui-nav-item layui-hide-xs"><a title="打卡记录" id="empRow">打卡记录</a></li>
            <li class="layui-nav-item layui-hide-xs"><a title="所有通知" id="allNews">所有通知</a></li>
            <li class="layui-nav-item layui-hide-xs"><a title="请假申请" id="leaveRequest"> 请假申请</a></li>

        </ul>
        <!--导航栏右边个人信息-->
        <ul class="layui-nav layui-layout-right ">
            <span style="color: white;border: solid 0px;"
                  class="layui-btn  layui-btn-lg layui-btn-primary layui-border-danger">
                <i class="layui-icon layui-icon-console" style="font-size: 25px"></i>
                <strong th:include="time"></strong>
            </span>
            <button style="color: antiquewhite;border: solid 0px;"
                    class="layui-btn  layui-btn-primary layui-border-danger">
                <i class="layui-icon layui-icon-group" style="font-size: 18px"></i>在线人数:
                <span th:text="${application.loginCount}"></span></button>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="" th:src="'../static/images/' + ${session.emp.getImgPath()}" class="layui-nav-img">
                    <span id="userName" th:text="${session.emp.getEmpName()}"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a id="update-emp-pass" title="修改密码">修改密码</a></dd>
                    <dd><a id="update-emp-img" title="修改头像">修改头像</a></dd>
                    <dd><a href="" th:href="@{/logout}" title="退出登录">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <strong th:text="${mess}" id="messInfo" style="display: none"></strong>

    <!--主题内容-->
    <div class="layui-body"><br><br><br><br>
        <!--上部分-->
        <div class="layui-col-lg10"
             style="height: 410px;border-bottom: #009f95 solid 3px;padding: 10px;margin-top: -70px">
            <!--动态轮播图-->
            <div class="layui-col-lg8" style="height: 100%;padding: 5px">
                <div class="layui-col-lg12" style="height: 100%;width: 100%;border: #009f95 solid 5px">
                    <div class="layui-carousel" id="news-carousel">
                        <div carousel-item id="new-img-box">
                        </div>
                    </div>
                </div>
            </div>
            <!--最新新闻-->
            <div class="layui-col-lg4" style="height: 100%;padding: 5px">
                <div class="layui-col-lg12" style="height: 100%;width: 100%" id="news-box">
                </div>
            </div>
        </div>

        <!--页面下部分-->
        <div class="layui-col-lg10" style="height: 240px; padding: 10px;">

            <!--打卡说明-->
            <div class="layui-col-lg4" style="height: 100%;padding: 5px">
                <div class="layui-col-lg12"
                     style="border: #009f95 solid 2px;border-radius:5px;height: 100%;width: 100%">
                    <div style="background-color: #009f95;width: 100%;height: 45px">
                        <h2 style="line-height: 38px">
                            <i class="layui-icon layui-icon-read"
                               style="margin-left: 100px;color: black;font-size: 25px">
                            </i> 打卡必读</h2>
                    </div>
                    <div style="padding: 5px">
                        <ul style="margin-left: 8px">
                            <li><span></span><i class="layui-icon layui-icon-tabs"
                                                style="color: #009f95;font-size: 20px"></i>
                                当前打卡时间为:
                            </li>
                            <li style="margin-left: 45px;padding: 3px">
                                <i class="layui-icon layui-icon-log" style="color: #009f95"></i>上午上班:<strong
                                    id="mor-on-time"></strong>
                                <i class="layui-icon layui-icon-log" style="color: #009f95"></i>上午下班:<strong
                                    id="mor-off-time"></strong></li>
                            <li style="margin-left: 45px;padding: 3px">
                                <i class="layui-icon layui-icon-log" style="color: #009f95"></i>下午上班:<strong
                                    id="aft-on-time"></strong>
                                <i class="layui-icon layui-icon-log" style="color: #009f95"></i>下午下班:<strong
                                    id="aft-off-time"></strong></li>
                            <li><span></span><i class="layui-icon layui-icon-help"
                                                style="color: #009f95;font-size: 20px"></i>
                                打卡注意事项:
                            </li>
                            <li style="margin-left: 45px;padding: 3px">上班前30分钟为正常打卡，30分钟后为迟到</li>
                            <li style="margin-left: 45px;padding: 3px">下班前30分钟为早退打卡，30分钟后为正常</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--打卡按钮-->
            <div class="layui-col-lg4" style="height: 100%;padding: 5px" id="clock-btn-box">

            </div>

            <!--打卡记录表-->
            <div class="layui-col-lg4" style="height: 100%;padding: 5px">
                <div class="layui-col-lg12"
                     style="border: #009f95 solid 2px;background-color:  #009f95;height: 100%;width: 100%;border-radius: 5px">
                    <table class="layui-table layui-fluid" style="text-align: center;border: solid 0px " lay-even
                           lay-skin="line">
                        <colgroup>
                            <col width="60">
                            <col width="100">
                            <col width="40">
                        </colgroup>
                        <thead>
                        <tr style="background-color:  #009f95;color: black">
                            <th style="text-align: center"><i class="layui-icon layui-icon-date"></i>时间段</th>
                            <th style="text-align: center"><i class="layui-icon layui-icon-log"></i>打卡时间</th>
                            <th style="text-align: center"><i class="layui-icon layui-icon-tips"></i>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>上午上班</td>
                            <td id="mor-on-row"></td>
                            <td id="mor-on-state"></td>
                        </tr>
                        <tr>
                            <td>上午下班</td>
                            <td id="mor-off-row"></td>
                            <td id="mor-off-state"></td>
                        </tr>
                        <tr>
                            <td>下午上班</td>
                            <td id="aft-on-row"></td>
                            <td id="aft-on-state"></td>
                        </tr>
                        <tr>
                            <td>下午下班</td>
                            <td id="aft-off-row"></td>
                            <td id="aft-off-state"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


    </div>


    <!--<div class="layui-footer">
      &lt;!&ndash; 底部固定区域 &ndash;&gt;
      底部固定区域
    </div>-->


</div>

<!--员工请假盒子-->
<div class="layui-fluid layui-form" id="leave-request-box" style="display: none">
    <div class="layui-form-item">
        <div class="layui-col-lg12">
            <label class="layui-form-label">请假日期：</label>
            <div class="layui-input-inline" style="border: #009f95 solid 1px">
                <input type="text" class="layui-input" id="leave-date" placeholder="yyyyMMdd" autocomplete="off">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-lg12">
            <label class="layui-form-label">时间段：</label>
            <div class="layui-input-block" style="border: #009f95 solid 1px">
                <select lay-verify="required" id="leave-time" autocomplete="off">
                    <option value=""></option>
                    <option value='上午'>上午</option>
                    <option value='下午'>下午</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <div class="layui-col-lg12">
            <label class="layui-form-label">请假事由：</label>
            <div class="layui-input-block" style="border: #009f95 solid 1px">
                <textarea autocomplete="off" placeholder="请输入请假事由,不得少于50个字" id="leave-reason"
                          class="layui-textarea"></textarea>
            </div>
        </div>
    </div>
    <br>
    <div class="layui-form-item">
        <div style="float: right;">
            <button class="layui-btn" id="add-leave-btn">提交申请</button>
        </div>
    </div>
</div>

<!--用户更换头像-->
<div class="layui-col-md12" id="update-emp-img-box" style="display: none">
    <div class="layui-card">
        <div class="layui-card-header">
            <i class="layui-icon layui-icon-next" style="color: red"></i>
            上传成功，自动刷新页面刷新,上传失败，请点击重试按钮,提示上传接口出现问题请刷新页面重试，图片上传需要时间，页面头像更新存在延迟，可在稍后刷新
        </div>
        <div class="layui-card-body" style="margin-top: 75px">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test-upload-normal">选择图片</button>
                <button type="button" class="layui-btn" id="btn">上传</button>
                <p style="float: right" id="test-upload-demoText"></p>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="test-upload-normal-img" width="150px" height="150px">
                </div>
            </div>
        </div>
    </div>
</div>


<!--员工查看自己的记录-->
<div class="layui-card" style="margin-top: 45px;display: none;margin-top: -10px" id="emp-all-row">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
            <h2>
                <i class="layui-icon layui-icon-form" style="color: #009f95;font-size: 30px;"></i>
                <strong id="show-year"></strong>年
                <strong id="show-month"></strong>月的考勤记录汇总
            </h2>
            <ul class="layui-tab-title" style="z-index: 999;background-color: #9F9F9F">
                <li class="layui-this" style="width: 30%">
                    <i class="layui-icon layui-icon-table" style="font-size: 18px"></i>上午考勤记录表
                </li>

                <li style="width: 30%">
                    <i class="layui-icon layui-icon-table" style="font-size: 18px"></i>下午考勤记录表
                </li>

                <li style="width: 30%">
                    <i class="layui-icon layui-icon-table" style="font-size: 18px"></i>请假记录表
                </li>
            </ul>
            <div class="test-table-reload-btn" style="margin-top: 10px;z-index: 9999;position: absolute">
                <!--查询日期盒子-->
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="query-date" autocomplete="off"
                               placeholder="点击选择日期" style="border: #009f95 solid 1px">
                    </div>
                </div>
                <a class="layui-btn layui-btn-primary layui-border-green" id="query-date-btn">查询</a>
            </div>
            <div class="layui-tab-content" style="margin-top: -20px;z-index: 5">
                <!--上午考勤记录表-->
                <div class="layui-tab-item layui-show">
                    <table class="layui-hide" id="mor-row" lay-filter="mor-row"></table>
                </div>

                <!--下午考勤记录表-->
                <div class="layui-tab-item">
                    <table class="layui-hide" id="aft-row" lay-filter="aft-row"></table>
                </div>

                <!--请假记录表-->
                <div class="layui-tab-item">
                    <table class="layui-hide" id="leave-row" lay-filter="leave-row"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--员工查看所有消息-->
<div class="layui-card" style="margin-top: 45px;display: none;margin-top: -10px" id="all-news">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
            <ul class="layui-tab-title" style="z-index: 999;background-color: #9F9F9F">
                <li class="layui-this" style="width: 20%;color: black;font-size: 25px">
                    <i class="layui-icon layui-icon-read" style="font-size: 25px"></i> 所有新闻
                </li>

            </ul>
            <div class="test-table-reload-btn" style="margin-top: 10px;z-index: 9999;position: absolute">
                <!--查询盒子-->
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="query-title"
                               placeholder="输入标题查询" style="border: #009f95 solid 1px">
                    </div>
                </div>
                <a class="layui-btn layui-btn-primary layui-border-green" id="query-title-btn">查询</a>
            </div>
            <div class="layui-tab-content" style="margin-top: -20px;z-index: 5">
                <!--上午考勤记录表-->
                <div class="layui-tab-item layui-show">
                    <table class="layui-hide" id="all-news-table" lay-filter="all-news-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>


<!--<script src="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/layui.js"></script>-->
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-3.1.0.js"></script>
<script type="text/javascript">
    //JS

    layui.use(['element', 'layer', 'util', 'jquery', 'table', 'carousel', 'laydate', 'upload'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , table = layui.table
            , admin = layui.admin
            , laydate = layui.laydate
            , carousel = layui.carousel
            , upload = layui.upload
            , $ = layui.jquery;
        // ,table = layui.table


        /*获取当前打卡时间*/
        getCheckTime();

        function getCheckTime() {
            let url = "getCheckTime";
            let param = {};
            $.get(url, param, function (data) {
                $("#mor-on-time").html(data.morOnTime);
                $("#mor-off-time").html(data.morOffTime);
                $("#aft-on-time").html(data.aftOnTime);
                $("#aft-off-time").html(data.aftOffTime);
            });
        }

        /*获取转发request信息主要是权限问题*/
        let mess = $("#messInfo").text();
        if (mess == null || mess === "") {
        } else {
            layer.msg(mess, {offset: '250px', time: 1500, anim: 6});
            $("#messInfo").text("");
        }

        /*获取当天打卡信息*/
        getClockRow();

        function getClockRow() {
            let url = "getMorClockRow";
            let param = {};
            $.get(url, param, function (data) {
                if (data === null || data === "") {
                    $("#mor-on-row").html("暂时无打卡记录");
                    $("#mor-on-state").html("--")
                    $("#mor-off-row").html("暂时无打卡记录")
                    $("#mor-off-state").html("--")
                } else {
                    if (data.morOn === null || data.morOn === "") {
                        $("#mor-on-row").html("暂时无打卡记录");
                        $("#mor-on-state").html("--")
                    } else {
                        $("#mor-on-row").html(data.morOn);
                        if (data.onState === "1" || data.onState === 1) {
                            $("#mor-on-state").html("正常")
                        } else {
                            $("#mor-on-state").html("迟到")
                        }
                    }
                    if (data.morOff === null || data.morOff === "") {
                        $("#mor-off-row").html("暂时无打卡记录");
                        $("#mor-off-state").html("--")
                    } else {
                        $("#mor-off-row").html(data.morOff);
                        if (data.offState === "1" || data.offState === 1) {
                            $("#mor-off-state").html("正常")
                        } else {
                            $("#mor-off-state").html("早退")
                        }
                    }
                }

            });
            let url1 = "getAftClockRow";
            let param1 = {};
            $.get(url1, param1, function (data1) {
                if (data1 === null || data1 === "") {
                    $("#aft-on-row").html("暂时无打卡记录");
                    $("#aft-on-state").html("--")
                    $("#aft-off-row").html("暂时无打卡记录")
                    $("#aft-off-state").html("--")
                } else {
                    if (data1.aftOn === null || data1.aftOn === "") {
                        $("#aft-on-row").html("暂时无打卡记录");
                        $("#aft-on-state").html("--")
                    } else {
                        $("#aft-on-row").html(data1.aftOn);
                        if (data1.onState === "1" || data1.onState === 1) {
                            $("#aft-on-state").html("正常")
                        } else {
                            $("#aft-on-state").html("迟到")
                        }
                    }
                    if (data1.aftOff === null || data1.aftOff === "") {
                        $("#aft-off-row").html("暂时无打卡记录");
                        $("#aft-off-state").html("--")
                    } else {
                        $("#aft-off-row").html(data1.aftOff);
                        if (data1.offState === "1" || data1.offState === 1) {
                            $("#aft-off-state").html("正常")
                        } else {
                            $("#aft-off-state").html("早退")
                        }
                    }
                }

            });
        }


        /*打卡按钮查询是否在打卡时间内 在设置为打卡 不在禁用按钮*/
        getClockBtnState()

        function getClockBtnState() {
            let url = "getClockBtnState";
            let param = {};
            $.get(url, param, function (data) {
                if (data === 1001 || data === "1001") {
                    let btn = '<button class="button-3d-1" style="width: 100%;height: 100%" title="上午上班打卡" id="clock-btn">上午上班打卡</button>';
                    $("#clock-btn-box").html(btn);
                } else if (data === 1002 || data === "1002") {
                    let btn = '<button class="button-3d-1" style="width: 100%;height: 100%" title="上午上班打卡" id="clock-btn">上午下班打卡</button>';
                    $("#clock-btn-box").html(btn);
                } else if (data === 1003 || data === "1003") {
                    let btn = '<button class="button-3d-1" style="width: 100%;height: 100%" title="上午上班打卡" id="clock-btn">下午上班打卡</button>';
                    $("#clock-btn-box").html(btn);
                } else if (data === 1004 || data === "1004") {
                    let btn = '<button class="button-3d-1" style="width: 100%;height: 100%" title="上午上班打卡" id="clock-btn">下午下班打卡</button>';
                    $("#clock-btn-box").html(btn);
                } else {
                    let btn = '<button class="button-3d-1" style="width: 100%;height: 100%" disabled title="不在打卡时间内" id="clock-btn">不在打卡时间内</button>';
                    $("#clock-btn-box").html(btn);
                }
            });
        }

        $("#clock-btn-box").delegate("#clock-btn", "click", function () {
            let ii = layer.load(0, {shade: false});
            setTimeout(function () {
                let url = "clickClockBtn";
                let param = {};
                /*1001 正常打卡成功， 1002 迟到打卡 ， 1003 早退打卡， 1004 打卡已经打卡了 ，1005 不在打卡时间内 ， 1006 打卡失败*/
                $.get(url, param, function (data) {
                    getClockRow();
                    layer.close(ii);
                    if (data === 1001 || data === "1001") {
                        layer.alert('打卡成功，状态：正常', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        });
                    } else if (data === 1002 || data === "1002") {
                        layer.alert('打卡成功，状态：迟到', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        });
                    } else if (data === 1003 || data === "1003") {
                        layer.alert('打卡成功，状态：早退', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        });
                    } else if (data === 1004 || data === "1004") {
                        layer.alert('你已经打卡了', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        });
                    } else if (data === 1005 || data === "1005") {
                        layer.alert('不在打卡时间内', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        });
                    } else {
                        layer.alert('打卡失败', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        });
                    }
                });
            });

        });

        /*查询前三条记录*/
        getNewsLimit();

        function getNewsLimit() {
            let url = "getNewsLimit";
            let param = {};
            $.get(url, param, function (data) {
                let newsInfo = '';
                let imgInfo = '';
                for (let i = 0; i < 3; i++) {
                    newsInfo += '<div class="layui-col-lg12" style="height: 33%;margin-top: 2px;">' +
                        '                        <div class="layui-col-lg12" style="padding: 5px;background-color: #009f95;text-align: center">' +
                        '                            <h2 style="margin-left: -20px">' +
                        '                                <i class="layui-icon layui-icon-template" style="font-size: 20px"></i> ' + data[i].title + '</h2>' +
                        '                        </div>' +
                        '                        <div class="layui-col-lg12"' +
                        '                             style="border-left: #009f95 solid 1px;border-right: #009f95 solid 1px;color: #009f95">' +
                        '                            <strong style="margin-left: 10px">' +
                        '                                <i class="layui-icon layui-icon-friends"></i> ' + data[i].author + '' +
                        '                            </strong>' +
                        '                            <strong style="float: right;margin-right:10px ">' +
                        '                                <i class="layui-icon layui-icon-date"></i> ' + data[i].releaseTime + '</strong>' +
                        '                        </div>' +
                        '                        <div class="layui-col-lg12" style="padding: 5px;border: #009f95 solid 1px;border-top: none">';
                    if (data[i].content.length <= 75) {
                        newsInfo += '                            <p style="text-indent: 2em;font-size: 12px">' + data[i].content + '</p>' +
                            '                        </div>' +
                            '                    </div>';
                    } else {
                        newsInfo += '                            <p style="text-indent: 2em;font-size: 12px">' + data[i].content.substring(0, 75)
                            + '<a style="margin-left: 5px;color:#009f95;text-decoration: none;border-bottom: #00F7DE solid 1px" href="#" title="' + data[i].content + '" class="news-content">详情</a></p>' +
                            '                        </div>' +
                            '                    </div>';
                    }
                    imgInfo += '<div><img src="../static/newsImages/' + data[i].imgPath + '" width="100%" height="100%">条目3</div>';
                }
                $("#news-box").html(newsInfo);
                $("#new-img-box").html(imgInfo);
                //构造轮播消息图片盒子
                carousel.render({
                    elem: '#news-carousel'
                    , width: '100%' //设置容器宽度
                    , height: '100%' //设置容器高度
                    , arrow: 'hover' //鼠标悬停显示箭头
                    , anim: 'default' //切换动画方式
                    , autoplay: true
                    , interval: '3000'
                });
            });
        }

        /*显示不完全的内容*/
        $("#news-box").delegate(".news-content", "click", function () {
            let newsContent = $(this).attr("title");//获得元素的属性值
            layer.alert(newsContent, {
                skin: 'layui-layer-molv'
                , closeBtn: 0
                , area: '500px'
            });
            return false;//取消超链接默认行为
        });


        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuRight: function () {
                var ii = layer.load(0, {shade: false});
                setTimeout(function () {
                    let url = "getEmpSession";
                    let param = {};
                    $.get(url, param, function (empInfo) {
                        layer.close(ii);
                        layer.open({
                            type: 1
                            ,
                            content: '<div style="margin-top: 30px;padding: 15px;"><fieldset style="border: #009f95 2px solid;border-radius: 15px">' +
                                '<legend><h2 style="color: #009f95">个人信息面板</h2></legend>' +
                                ' <table class="layui-table" lay-skin="line" lay-even style="color: #009f95">' +
                                '        <colgroup><col width="150" height = "50"><col width="200" height = "50"></colgroup>' +
                                '        <tbody>' +
                                '        <tr>' +
                                '          <td rowspan="4"><img  src="../static/images/' + empInfo.imgPath + '" style="width: 150px;height: 150px;margin-left: 20px"></td>' +
                                '          <td>工号 : ' + empInfo.empNumber + '</td>' +
                                '        </tr>' +
                                '        <tr><td>姓名 : ' + empInfo.empName + '</td></tr>' +
                                '        <tr><td>性别 : ' + empInfo.empGender + '</td></tr>' +
                                '        <tr><td>入职时间 : ' + empInfo.addTime + '</td></tr>' +
                                '        <tr><td>所属部门 : ' + empInfo.department + '</td><td>工作岗位 : ' + empInfo.empPosition + '</td></tr>' +
                                '        <tr><td>电话 : ' + empInfo.empTel + '</td><td>邮箱 : ' + empInfo.empEmail + '</td></tr>' +
                                '        <tr><td>学历 : ' + empInfo.education + '</td><td>出生日期 : ' + empInfo.birthday + '</td></tr>' +
                                '        <tr><td colspan="2">住址 : ' + empInfo.address + '</td></tr>' +
                                '        </tbody>' +
                                '      </table><br></fieldset></div>'
                            ,
                            area: ['450px', '100%']
                            ,
                            offset: 'rt' //右上角
                            ,
                            anim: 2
                            ,
                            shadeClose: true
                            ,
                            title: '个人信息'
                        });
                    });
                });
            }
        });


        $("#update-emp-pass").click(function () {
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',
                area: ['420px', '420px'],
                content: '<div class="layui-col-md12" style="padding: 20px" id="del-box">' +
                    '<div class="layui-col-md12"  id="showTemp" > ' +
                    '<div class="layui-col-md4" style="background-color: #009f95 ;height: 20px;" id="temp-1"></div>' +
                    '<div class="layui-col-md4" style="height: 20px" id="temp-2"></div>' +
                    '<div class="layui-col-md4" style="height: 20px" id="temp-3"></div>' +
                    '</div>' +
                    '<div class="layui-col-md12"  id="ques-box" style="margin-top: 20px"> </div>' +
                    '<div id="btn-div"></div>' +
                    '    </div>',
                title: '忘记密码'
                , anim: 0
            });
            let url = "../getQuesByEmpNum";
            let param = {};
            $.get(url, param, function (data) {
                if (data === null || data === "") {
                    layer.msg('出错了,有疑问请联系管理员！', {offset: '250px', time: 1500, anim: 6});
                } else {
                    let resInfo = '<div class="layui-form-item">\n' +
                        '                            <label  style="color: black">密保问题:</label>\n' +
                        '                            <label style="color: #009f95;margin-left: 20px"> ' + data + '</label>\n' +
                        '                        </div>' +
                        '<div class="layui-form-item">\n' +
                        '                            <label  style="color: black">请输入问题的答案进行下一步:</label><br><br>\n' +
                        '                            <input style="border: #009f95 solid 1px" type="text"  id="empAns" lay-verify="required" placeholder="在这里输入密码问题的答案" class="layui-input" autocomplete="off">\n' +
                        '                        </div>';
                    $("#ques-box").html(resInfo);
                    let btn = '<button class="layui-btn" style="float: right;margin-top: 20px" id="ans-btn">下一步</button>';
                    $("#btn-div").html(btn);
                }
            });
            $('#del-box').delegate("#ans-btn", "click", function () {
                let ii = layer.load(0, {shade: false});
                setTimeout(function () {
                });
                let empAns = $("#empAns").val();
                if (empAns === null || empAns === "") {
                    layer.msg('请输入问题答案进行下一步', {offset: '250px', time: 2500, anim: 6});
                    return false;
                } else {
                    let url = "../checkEmpAns";
                    let param = {empAns: empAns};
                    $.post(url, param, function (data) {
                        if (data === true || data === "true") {
                            $("#temp-2").css("background-color", '#009f95');
                            let resInfo = '<div class="layui-form-item ">\n' +
                                '                <label><h2>设置一个新密码</h2><br>' +
                                '<i class="layui-icon layui-icon-triangle-r" style="color: red;margin-left: 10px"></i>长度不能小于6位且必须同时包含大小写字母</label>\n' +
                                '        </div>' +
                                '<div class="layui-form-item layui-col-lg12">\n' +
                                '                <input type="password" id="newPass" required  lay-verify="required" placeholder="长度不能小于6位且必须同时包含大小写字母" autocomplete="off" class="layui-input" style="border: #009f95 solid 1px" onkeyup="checkNewPass()">\n' +
                                '            <br><span style="color: red" id="checkPass"></span>' +
                                ' </div>' +
                                '<div class="layui-form-item layui-col-lg12">\n' +
                                '              <input type="password" id="newPassAgain" required  lay-verify="required" placeholder="再次输入密码" autocomplete="off" class="layui-input" style="border: #009f95 solid 1px" onkeyup="checkPassAgain()">\n' +
                                '           <span style="color: red" id="checkPassAgain"></span>' +
                                ' </div>';
                            $("#ques-box").html(resInfo);
                            let btn = '<button class="layui-btn" style="float: right;" id="update-btn">下一步</button>';
                            $("#btn-div").html(btn);
                        } else if (data === false || data === "false") {
                            layer.msg('答案不正确', {offset: '250px', time: 2500, anim: 6});
                        } else {
                            layer.msg('出错了,请联系管理员', {offset: '250px', time: 2500, anim: 6});
                        }
                    });
                }
            });
            $('#del-box').delegate("#update-btn", "click", function () {
                let newPass = $("#newPass").val();
                if (!(checkNewPass() && checkPassAgain())) {
                    layer.msg('请按规则填写密码填写', {offset: '250px', time: 2500, anim: 6});
                    return false;
                } else {
                    let url = "../updateEmpPassByEmpNumber";
                    let param = {newPass: newPass};
                    $.post(url, param, function (data) {
                        if (data === true || data === "true") {
                            layer.closeAll();
                            layer.open({
                                type: 1,
                                skin: 'layui-layer-admin',
                                closeBtn: false,
                                area: '350px',
                                anim: 6,
                                icon: 1,
                                content: '<div class="layui-col-md12" style="padding: 20px" id="del-box">' +
                                    '        <h3>修改密码成功,请重新登录!</h3>' +
                                    '        <button class="layui-btn" style="float: right;margin-top: 20px" id="check-rquerst-ok">确定</button>' +
                                    '    </div>',
                                title: '处理结果'
                            });
                            //执行删除操作前管理员要输入管理员操作密码
                            $("#check-rquerst-ok").click(function () {
                                window.location = '../logout';
                            });
                        } else if (data === false || data === "false") {
                            layer.msg('新密码不能与原密码相同', {offset: '250px', time: 2500, anim: 6});
                        } else {
                            layer.msg('出错了,请联系管理员', {offset: '250px', time: 2500, anim: 6});
                        }
                    });

                }

            });
        });

        /*请假申请*/
        $("#leaveRequest").click(function () {
            layer.open({
                type: 1
                , skin: 'layui-layer-rim'
                , area: ['440px', '400px']
                , content: $("#leave-request-box")
                , title: '请假申请--请填写以下信息'
                , end: function (res) {
                    $("#leave-request-box").css("display", 'none');
                }
            });
            /*请假时间选择盒子盒子*/
            laydate.render({
                elem: '#leave-date'
                , min: 1
                , max: 7
                , format: 'yyyyMMdd'
            });
            /*处理请假申请申请*/
            $("#add-leave-btn").click(function () {
                alert(1);
                let leaveDate = $("#leave-date").val();
                let leaveTime = $("#leave-time").val();
                let leaveReason = $("#leave-reason").val();
                if (leaveDate === null || leaveTime === null || leaveReason === null || leaveReason === "") {
                    layer.msg('请按要求填写完整的请假申请', {offset: '250px', time: 2500, anim: 6});
                } else if (leaveReason.length < 50) {
                    layer.msg('请假申请的理由不能少于50字', {offset: '250px', time: 2500, anim: 6});
                } else {
                    let url = "addEmpLeaveRequest";
                    let param = {leaveDate: leaveDate, leaveTime: leaveTime, leaveReason: leaveReason};
                    $.post(url, param, function (data) {
                        layer.closeAll();
                        if (data === true || data === "true") {
                            /*layer.alert('提交成功', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                            });*/
                            alert("成功");
                        } else {
                            /*layer.alert('提交失败，或者你提提交该时间段的申请，请联系管理员', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                            });*/
                            alert("失败");
                        }
                    });
                }
            });
        });


        /*更换头像*/
        $("#update-emp-img").click(function () {
            layer.open({
                type: 1
                , skin: 'layui-layer-rim'
                , area: ['500px', '500px']
                , content: $("#update-emp-img-box")
                , title: '头像上传--请根据提示操作'
                , end: function (res) {
                    $("#update-emp-img-box").css("display", 'none');
                }
            });

            //普通图片上传
            let uploadInst = upload.render({
                elem: '#test-upload-normal'
                , url: '/emp/updateEmpImg'
                , acceptMime: 'image/*'
                , auto: false
                , bindAction: '#btn'
                , size: 0
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#test-upload-normal-img').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        var demoText = $('#test-upload-demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                        return layer.msg('上传失败');

                    } else {//上传成功
                        layer.closeAll();
                        return window.location = 'emp/empIndex';
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#test-upload-demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });


        /*查询员工记录*/
        $("#empRow").click(function () {
            layer.open({
                type: 1
                , skin: 'layui-layer-rim'
                , area: ['1000px', '600px']
                , content: $("#emp-all-row")
                , title: '所有记录'
                , end: function (res) {
                    $("#emp-all-row").css("display", 'none');
                }
            });

            /*获取上午考勤表*/
            table.render({
                elem: '#mor-row'
                , toolbar: true
                , height: 400
                , url: '/emp/empGetMorRowByDate'
                , skin: 'line'
                , title: '上午考勤信息'
                , cols: [
                    [
                        {field: 'id', fixed: 'left', title: 'ID', align: 'center',}
                        , {field: 'empNumber', fixed: 'left', title: '员工号', align: 'center',}
                        , {field: 'empName', fixed: 'left', title: '姓名', align: 'center',}
                        , {
                        field: 'rowDate', title: '日期', align: 'center', templet: function (res) {
                            let year = res.rowDate.substring(0, 4);
                            let month = res.rowDate.substring(4, 6);
                            let day = res.rowDate.substring(6, 8);
                            return year + '-' + month + '-' + day;
                        }
                    }
                        , {
                        field: 'morOn', title: '上班打卡时间', align: 'center', templet: function (res) {
                            return (res.morOn === null || res.morOn === '') ? '无打卡记录' : res.morOn;
                        }
                    }
                        , {
                        field: 'onState', title: '状态', align: 'center', templet: function (res) {
                            if (res.onState === null || res.onState === "")
                                return "--";
                            else if (res.onState === 3 || res.onState === "3") {
                                return "请假";
                            }
                            return res.onState === "1" ? '正常' : '<span style="color: red">迟到</span>';
                        }
                    }
                        , {
                        field: 'morOff', title: '下班打卡时间', align: 'center', templet: function (res) {
                            return (res.morOff === null || res.morOff === '') ? '无打卡记录' : res.morOff;
                        }
                    }
                        , {
                        field: 'offState', title: '状态', align: 'center', templet: function (res) {
                            if (res.offState === null || res.offState === "")
                                return "--"
                            else if (res.offState === 3 || res.offState === "3") {
                                return "请假";
                            }
                            return res.offState === "1" ? '正常' : '<span style="color: red">早退</span>';
                        }
                    }
                    ]
                ]
                , text: {
                    none: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                        '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                        '      好像没有还没找到数据呢<br>\n' +
                        '    </div>'
                    ,
                    error: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                        '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                        '      好像出错了呢\n' +
                        '    </div>'
                }
                , loading: true
            });

            /*获取下午考勤表*/
            table.render({
                elem: '#aft-row'
                , toolbar: true
                , height: 400
                , url: '/emp/empGetAftRowByDate'
                , skin: 'line'
                , title: '下午考勤信息'
                , cols: [
                    [
                        {field: 'id', fixed: 'left', title: 'ID', align: 'center'}
                        , {field: 'empNumber', fixed: 'left', title: '员工号', align: 'center'}
                        , {field: 'empName', fixed: 'left', title: '姓名', align: 'center'}
                        , {
                        field: 'rowDate', title: '日期', align: 'center', templet: function (res) {
                            let year = res.rowDate.substring(0, 4);
                            let month = res.rowDate.substring(4, 6);
                            let day = res.rowDate.substring(6, 8);
                            return year + '-' + month + '-' + day;
                        }
                    }
                        , {
                        field: 'aftOn', title: '上班打卡时间', align: 'center', templet: function (res) {
                            return (res.aftOn === null || res.aftOn === '') ? '无打卡记录' : res.aftOn;
                        }
                    }
                        , {
                        field: 'onState', title: '状态', align: 'center', templet: function (res) {
                            if (res.onState === null || res.onState === "")
                                return "--"
                            else if (res.onState === 3 || res.onState === "3") {
                                return "请假";
                            }
                            return res.onState === "1" ? '正常' : '<span style="color: red">迟到</span>';
                        }
                    }
                        , {
                        field: 'aftOff', title: '下班打卡时间', align: 'center', templet: function (res) {
                            return (res.aftOff === null || res.aftOff === '') ? '无打卡记录' : res.aftOff;
                        }
                    }
                        , {
                        field: 'offState', title: '状态', align: 'center', templet: function (res) {
                            if (res.offState === null || res.offState === "")
                                return "--"
                            else if (res.offState === 3 || res.offState === "3") {
                                return "请假";
                            }
                            return res.offState === "1" ? '正常' : '<span style="color: red">早退</span>';
                        }
                    }
                    ]
                ]
                , text: {
                    none: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                        '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                        '      好像没有还没找到数据呢<br>\n' +
                        '    </div>'
                    ,
                    error: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                        '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                        '      好像出错了呢\n' +
                        '    </div>'
                }
                , loading: true
            });

            /*获取所有请假信息*/
            table.render({
                elem: '#leave-row'
                , toolbar: true
                , height: 400
                , url: '/emp/empGetLeaveRowByDate'
                , skin: 'line'
                , title: '员工请假记录信息'
                , cols: [
                    [
                        {field: 'id', fixed: 'left', title: 'ID', align: 'center', width: 50}
                        , {field: 'empNumber', fixed: 'left', title: '员工号', align: 'center', width: 120}
                        , {field: 'empName', fixed: 'left', title: '姓名', align: 'center', width: 80}
                        , {field: 'department', title: '部门', align: 'center', width: 80}
                        , {field: 'empPosition', title: '职位', align: 'center', width: 80}
                        , {
                        field: 'leaveDate', title: '请假日期', align: 'center', width: 150, templet: function (res) {
                            let year = res.leaveDate.substring(0, 4);
                            let month = res.leaveDate.substring(4, 6);
                            let day = res.leaveDate.substring(6, 8);
                            return year + '-' + month + '-' + day;
                        }
                    }
                        , {field: 'leaveTime', title: '时间段', align: 'center', width: 80}
                        , {field: 'reason', title: '请假理由', align: 'center'}
                        , {
                        field: 'checkFlag', title: '是否处理', align: 'center', width: 100, templet: function (res) {
                            return res.checkFlag === 1 ? '已处理' : '未处理';
                        }
                    }
                        , {
                        field: 'agreeFlag', title: '是否批准', align: 'center', width: 100, templet: function (res) {
                            return res.agreeFlag === 1 ? '已批准' : '未批准';
                        }
                    }
                    ]
                ]
                , text: {
                    none: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                        '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                        '      好像没有找到数据呢\n' +
                        '    </div>', error: '出错了'
                }
                , loading: true
            });

            /*查询日期时间 标题初始化*/
            titleInit();

            function titleInit() {
                let now = new Date();
                let year = '0' + now.getFullYear();//获取年份
                let month = now.getMonth() + 1;//获取月份
                let day = now.getDate();//获取日期
                if (month < 10) month = '0' + month;
                $("#show-year").html(year.substring(3, 5));
                $("#show-month").html(month);
            }

            laydate.render({
                elem: '#query-date'
                , type: 'month'
                , format: 'yyyyMM'
                , max: new Date().toLocaleString()
            });

            $("#query-date-btn").click(function () {
                let queryDate = $("#query-date").val();
                $("#show-year").html(queryDate.substring(2, 4));
                $("#show-month").html(queryDate.substring(4, 6));
                if (null == queryDate || "" === queryDate) {
                    layer.msg('请选择日期', {offset: '250px', time: 1500, anim: 6});
                } else {
                    /*重载上午打卡记录表格*/
                    table.reload('mor-row', {
                        url: '/emp/empGetMorRowByDate'
                        , where: {queryDate: queryDate} //设定异步数据接口的额外参数
                    });
                    /*重载下午打卡记录表格*/
                    table.reload('aft-row', {
                        url: '/emp/empGetAftRowByDate'
                        , where: {queryDate: queryDate} //设定异步数据接口的额外参数
                    });
                    table.reload('leave-row', {
                        url: '/emp/empGetLeaveRowByDate'
                        , where: {queryDate: queryDate} //设定异步数据接口的额外参数
                    });
                }
            });
        });


        /*查询所有新闻*/
        $("#allNews").click(function () {
            layer.open({
                type: 1
                , skin: 'layui-layer-rim'
                , area: ['1000px', '600px']
                , content: $("#all-news")
                , title: '所有新闻'
                , end: function (res) {
                    $("#all-news").css("display", 'none');
                }
            });

            /*获取所有新闻表*/
            table.render({
                elem: '#all-news-table'
                , toolbar: true
                , height: 400
                , url: '/emp/getAllNews'
                , skin: 'line'
                , title: '所有新闻'
                , cols: [
                    [
                        {field: 'id', title: 'ID', align: 'center', width: 50}
                        , {field: 'title', title: '标题', align: 'center',}
                        , {field: 'author', title: '作者', align: 'center', width: 80}
                        , {field: 'releaseTime', title: '发布日期', align: 'center',}
                        , {field: 'content', title: '内容', align: 'center'}
                        , {
                        field: 'imgPath', title: '消息图片', align: 'center', width: 100, templet: function (res) {
                            return '<img src="../static/newsImages/' + res.imgPath + '" class="layui-nav-img">'
                        }
                    }
                    ]
                ]
                , text: {
                    none: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                        '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                        '      好像没有还没找到数据呢<br>\n' +
                        '    </div>'
                    ,
                    error: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                        '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                        '      好像出错了呢\n' +
                        '    </div>'
                }
                , loading: true
            });

            $("#query-title-btn").click(function () {
                let title = $("#query-title").val();
                if (null == title || "" === title) {
                    layer.msg('请选择标题查询', {offset: '250px', time: 1500, anim: 6});
                } else {
                    table.reload('all-news-table', {
                        url: '/emp/getAllNews'
                        , where: {title: title} //设定异步数据接口的额外参数
                    });
                }
            });
        });


        /*/!****** 获取所有学生信息****!/
        table.render({
          elem: '#allStu'
          ,height: 525
          ,toolbar: true
          ,url:'/getAllStu'
          ,title:'所有学生成绩'
          ,cols:[
            [
              { type: 'checkbox' , fixed: 'left'}
              ,{field:'id', title:'学生ID',  align: 'center', sort:true }
              ,{field:'number', title:'学号',  align: 'center'}
              ,{field:'name', title:'姓名',  align: 'center'}
              ,{field:'gender', title:'性别',  align: 'center'}
              ,{field:'age', title:'年龄',  align: 'center', sort:true}
              ,{fixed: 'right', title:'操作', align: 'center', toolbar: '#allStu-table-toolbar'}
            ]
          ]
          ,limits:[10,20,30]
          ,text : { none:'暂无相关数据'}
          ,loading:true
          ,page: true
        });*/

        //头工具栏事件
        /*  table.on('toolbar(allStu)', function(obj){
              var checkStatus = table.checkStatus(obj.config.id);
              switch(obj.event){
                  case 'getCheckData':
                      var data = checkStatus.data;
                      layer.alert(JSON.stringify(data));
                      break;
                  case 'getCheckLength':
                      var data = checkStatus.data;
                      layer.msg('选中了：'+ data.length + ' 个');
                      break;
                  case 'isAll':
                      layer.msg(checkStatus.isAll ? '全选': '未全选');
                      break;
              };
          });*/


        //操作栏监听事件
        /*table.on('tool(allStu)', function(obj){
          var data = obj.data;
          if(obj.event === 'del'){
            layer.confirm('要删除学号为 '+ data.number + ' 的学生吗？', function(index){
              var url = "delStu";
              var param = {number:data.number};
              $.get(url,param,function (data) {
                if (data == true || data === "true"){
                  /!*obj.del();
                  layer.close(index);*!/
                  table.reload('allStu', {
                    page: {
                      curr: this.page //重新从第 1 页开始
                    }
                  });

                  layer.msg("删除成功!",{icon:1,time:1500});
                }else {
                  layer.msg("删除失败!",{icon:2,time:1500});
                }
              });
            });
          } else if(obj.event === 'edit'){
            layer.open({
              type: 1,
              title:'编辑学号为 ' +data.number+ '的信息',
              skin: 'layui-layer-rim',
              area: ['420px', '240px'],
              content: '<div class="layui-col-lg6">\n' +
                      '        <label class="layui-form-label">学号：</label>\n' +
                      '        <div class="layui-input-block">\n' +
                      '            <input type="text" id="number" value=""  class="layui-input" readonly>\n' +
                      '        </div>\n' +
                      '    </div><br>\n' +
                      '    <div class="layui-col-lg6">\n' +
                      '        <label class="layui-form-label">姓名：</label>\n' +
                      '        <div class="layui-input-block">\n' +
                      '            <input type="text" name="name"  value=""  class="layui-input">\n' +
                      '        </div>\n' +
                      '    </div><br>\n' +
                      '    <div class="layui-col-lg6">\n' +
                      '        <label class="layui-form-label">性别：</label>\n' +
                      '        <div class="layui-input-block">\n' +
                      '            <input type="text" name="gender" value="" class="layui-input">\n' +
                      '        </div>\n' +
                      '    </div><br>\n' +
                      '    <div class="layui-col-lg6">\n' +
                      '        <label class="layui-form-label">年龄：</label>\n' +
                      '        <div class="layui-input-block">\n' +
                      '            <input type="text" name="age" value="" class="layui-input">\n' +
                      '        </div>\n' +
                      '    </div>'});
          }
        });*/


        /*/!*地级市选择框*!/
        var province = $("#province"),
                city = $("#city"),
                district = $("#district");

        //初始将省份数据赋予
        for (var i = 0; i < provinceList.length; i++) {
          addEle(province, provinceList[i].name);
        }

        //赋予完成 重新渲染select
        form.render('select');

        //向select中 追加内容
        function addEle(ele, value) {
          var optionStr = "";
          optionStr = "<option value=" + value + " >" + value + "</option>";
          ele.append(optionStr);
        }

        //移除select中所有项 赋予初始值
        function removeEle(ele) {
          ele.find("option").remove();
          var optionStar = "<option value=" + "0" + ">" + "请选择" + "</option>";
          ele.append(optionStar);
        }

        var provinceText,
                cityText,
                cityItem;

        //选定省份后 将该省份的数据读取追加上
        form.on('select(province)', function(data) {
          provinceText = data.value;
          $.each(provinceList, function(i, item) {
            if (provinceText == item.name) {
              cityItem = i;
              return cityItem;
            }
          });
          removeEle(city);
          removeEle(district);
          $.each(provinceList[cityItem].cityList, function(i, item) {
            addEle(city, item.name);
          })
          //重新渲染select
          form.render('select');
        })

        ////选定市或直辖县后 将对应的数据读取追加上
        form.on('select(city)', function(data) {
          cityText = data.value;
          removeEle(district);
          $.each(provinceList, function(i, item) {
            if (provinceText == item.name) {
              cityItem = i;
              return cityItem;
            }
          });
          $.each(provinceList[cityItem].cityList, function(i, item) {
            if (cityText == item.name) {
              for (var n = 0; n < item.areaList.length; n++) {
                addEle(district, item.areaList[n]);
              }
            }
          });
          //重新渲染select
          form.render('select');
        });
    */
    });


    function checkNewPass() {
        let newPass = $("#newPass").val();
        if (newPass.length < 6) {
            $("#checkPass").html("密码的长度不能小于6位");
            return false;
        } else {
            let rule1 = /[0-9]/;
            let rule2 = /[a-z]/;
            let rule3 = /[A-Z]/;
            if (rule1.test(newPass) && rule2.test(newPass) && rule3.test(newPass)) {
                $("#checkPass").html("");
                return true;
            } else {
                $("#checkPass").html("密码必须同时包含大小写字母和数字");
                return false;
            }
        }
    }

    function checkPassAgain() {
        let newPass = $("#newPass").val();
        let newPassAgain = $("#newPassAgain").val();
        if (newPassAgain === null || newPassAgain === "") {
            $("#checkPassAgain").html("请确认密码");
            return false;
        } else if (newPass === newPassAgain) {
            $("#checkPassAgain").html("");
            return true;
        } else {
            $("#checkPassAgain").html("两次密码不一致");
            return false;
        }
    }


</script>


</body>
</html>


